<div id="myVue" class="right_col" role="main">
    <h3>This is Vue test page</h3>
    <p>===== 数据单向绑定 =====</p>
    <form>
        <input type="text" :value="user.name">
    </form>     <br>
    <h4>{{company}}</h4>
    <p><span style="color: red">{{companyError}}</span></p>
    <p>{{user.name | filter1 | filter2}}</p>
    <p>{{nameComputed}}</p>
    <p><span style="color: red">{{userNameError}}</span></p>
    <p>{{user.age}}</p>
    <p>{{user.gender}}</p>
    <p>{{user.roles}}</p>
    <p>{{user.city}}</p>
    <br>
    <p>===== 数据双向绑定 && 列表渲染 =====</p>
    <form>
        <p><input type="text" v-model.trim="company"></p>
        <p><input type="text" v-model.trim="user.name"></p>
        <p><input type="number" v-model.number="user.age"></p>
        <p>
            <span v-for="item in genders">
               <input type="radio" :value="item" :key="item" v-model="user.gender"> {{item}}
            </span>
        </p>
        <p>
            <span v-for="item in roles">
                <input type="checkbox" :value="item.id" :key="item.id" v-model="user.roles"> {{item.name}}
            </span>
        </p>
        <p>
            <select v-model="user.city">
                <option v-for="(item,index) in cities" :value="item.id" :key="item.id">{{item.name}} -- {{index}}</option>
            </select>
        </p>
        <p>
            <ul>
                <li v-for="item in cities" :id="item.id" :key="item.id">{{item.name}}</li>
            </ul>
        </p>
        <p>
            <table>
                <tr>
                    <td>ID</td>
                    <td>name</td>
                </tr>
                <tr v-for="item in cities">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </table>
        </p>
    </form>
    <p>===== 条件渲染 =====</p>
    <p><span v-if="user.name=='Tom'">今天是个好天气</span></p>
    <p><span v-show="user.name=='jianghu'">今天不是个好天气。。。</span></p>
    <p>===== 事件绑定 =====</p>
    <p>
        <button class="btn btn-sm btn-success" @click="test1()">test1</button>
        <button name="btn" class="btn btn-sm btn-success" data="qwertyuiop" @click="test2($event)">test2</button>
    </p>
    <p>===== 动画 =====</p>
    <p><button class="btn btn-sm btn-success" @click="show=!show" >点击改变动画</button></p>
    <transition name="fade">
        <p v-show="show">显示动画</p>
    </transition>

</div>

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
</style>

<script>
    //全局过滤器
    Vue.filter("filter1",function (value) {
        if (!value){
            return "";
        }
        return value.replaceAll("a","*");
    })

    var myVue = new Vue({
        el:"#myVue",
        data:{
            company:"SFAC",
            companyError:"",
            user:{name:"Tom",age:19,gender:"male",roles:[1,2],city:3},
            userNameError:"",
            roles:[{id:1,name:"admin"},{id:2,name:"manager"},{id:3,name:"staff"}],
            genders:["male","female"],
            cities:[{id:1,name:"chengdu"},{id:2,name:"chongqing"},{id:3,name:"wuhan"},{id:4,name:"nanjing"},{id:5,name:"shanghai"}],
            show:true
        },
        methods:{
            test1: function () {
                console.log("This is test1 function")
            },
            test2: function (event) {
                console.log(event.currentTarget.name)
                console.log(event.currentTarget.attributes.data.value)
                console.log("This is test2 function")
            }
        },
        watch:{
            company(newValue,oldValue) {
                this.companyError = newValue.length > 6 ? "公司名太长！" : ""
            },
            'user.name'(newValue,oldValue) {
                this.userNameError = newValue.length > 6 ? "用户名太长！" : ""
            }
        },
        computed:{
            nameComputed:function () {
                return this.user.name.toUpperCase()
            }
        },
        filters:{
            filter2:function (value){
                if (!value) {
                    return "";
                }
                return value.replaceAll("b","-");
            }
        },
        // vue实例初始化完成
        created(){
            window.test1=this.test1;
        },
        // vue实例加载完成并且和页面元素绑定成功
        mounted(){
            this.test1();
        }
    });
</script>
